<template>
<div>
  <el-dialog
    :title="title"
    :fullscreen=true
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="OnClose">
    <el-row :gutter="10">
      <el-col :span="15">
        <el-card  shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
          <PointAddList ref="pointAddList" :floorId='inputForm.floor.id' type="room" url='/smis/floor/jfRoom/list' nameKey='name' @onMapClick="onMapClick" @onDataClick="onDataClick"></PointAddList>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card  shadow="never" :body-style="contentViewHeight">
          <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                   label-width="120px">
            <el-row  :gutter="15">
              <el-col :span="22">
                   <el-form-item label="铺位编号" prop="name"
                       :rules="[
                         {required: true, message:'铺位编号不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.name" placeholder="请填写铺位编号"     ></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="22">
                 <el-form-item label="在模型上" prop="meshName"
                               :rules="[
                        ]">
                   <el-radio-group v-model="inputForm.meshName">
                     <el-radio v-for="item in this.$dictUtils.getDictList('yes_no')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
                   </el-radio-group>
                 </el-form-item>
               </el-col>
              <el-col :span="22">
                   <el-form-item label="x" prop="x"
                       :rules="[
                         {required: true, message:'x不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.x" placeholder="请填写x"     ></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="22">
                   <el-form-item label="y" prop="y"
                       :rules="[
                         {required: true, message:'y不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.y" placeholder="请填写y"     ></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="22">
                   <el-form-item label="z" prop="z"
                       :rules="[
                         {required: true, message:'z不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.z" placeholder="请填写z"     ></el-input>
                  </el-form-item>
               </el-col>
              <!-- <el-col :span="12">
                   <el-form-item label="地图模型" prop="meshName"
                       :rules="[
                        ]">
                     <el-input v-model="inputForm.meshName" placeholder="请填写地图模型"     ></el-input>
                  </el-form-item>
               </el-col> -->
            </el-row>
          </el-form>
          <el-button type="primary" class="uni-button" @click="doSubmit()" v-noMoreClick>添加</el-button>
          <div class="uni-addlist-delete" v-if="selectItem.id !== ''">
            <div>当前选中了{{selectItem.name}}</div>
            <el-button type="danger" size="small" @click="doDelete()" v-noMoreClick>删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>

<script>
  import PointAddList from '@/components/jfMap/pointAddList.vue'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        selectItem: {
          id: '',
          name: ''
        },
        inputForm: {
          id: '',
          name: '',
          floor: {
            id: ''
          },
          x: '',
          y: '',
          z: '',
          meshName: '1'
        }
      }
    },
    components: {
      PointAddList
    },
    computed: {
      contentViewHeight () {
        let height = this.$store.state.common.documentClientHeight - 152
        return {height: height + 'px'}
      }
    },
    methods: {
      init (method, id, floorId) {
        this.method = method
        this.inputForm.id = id
        this.title = `批量添加`
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.inputForm.floor.id = floorId
          this.resetFields()
          this.$refs.pointAddList.showFloor(floorId)
        })
      },
      resetFields(){
        this.inputForm.id = ''
        this.inputForm.name = ''
        // this.inputForm.meshName = '1'
        this.inputForm.x = ''
        this.inputForm.y = ''
        this.inputForm.z = ''
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/smis/floor/jfRoom/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.$message.success(data.msg)
                this.$refs.pointAddList.refreshList()
                this.resetFields()
              }
              this.loading = false
            })
          }
        })
      },
      doDelete () {
        this.loading = true
        this.$http({
          url: '/smis/floor/jfRoom/delete',
          method: 'delete',
          params: {'ids': this.selectItem.id}
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.$refs.pointAddList.refreshList()
            this.selectItem = {
              id: '',
              name: ''
            }
          }
          this.loading = false
        })
      },
      onMapClick (e) {
        this.inputForm.x = e.x
        this.inputForm.y = e.y
        this.inputForm.z = e.z
      },
      onDataClick (e) {
        this.selectItem = e
      },
      OnClose (){
        this.$emit('refreshDataList')
      }
    }
  }
</script>
<style scoped>
  .uni-button {
    float: right;
  }
</style>
